<!--
 * @Description: 
 * @Autor: Bingo
 * @Date: 2024-08-13 11:44:41
 * @LastEditors: Bingo
 * @LastEditTime: 2024-08-15 18:29:54
-->
<template>
  <footer class="home-section-footer">
    <div class="home-section-footer-top">
      <div class="home-section-footer-top-network1">
        集团成员网站:
        <span
          v-for="item in networkItemList"
          :key="item.key"
          class="home-section-footer-top-network-item"
          v-changeBig="1.1"
          @click="doToGoPage(item.url)"
          >{{ item.text }}</span
        >
      </div>
      <div class="home-section-footer-top-network2">
        服务功能网站:
        <span
          v-for="item in funcNetworkItemList"
          :key="item.key"
          class="home-section-footer-top-network-item"
          v-changeBig="1.1"
          @click="doToGoPage(item.url)"
          >{{ item.text }}</span
        >
      </div>
    </div>
    <div class="home-section-footer-bottom-right">
      {{ copyRight }}
    </div>
  </footer>
</template>
<script lang="ts" setup>
const networkItemList = [
  {
    key: "guanwang",
    text: "康佳官网",
    url: "https://www.konka.com/",
  },
  {
    key: "shequ",
    text: "康佳官方社区",
    url: "https://www.kkapp.com/#/",
  },
  {
    key: "shangxian",
    text: "康佳壹视界商业显示",
    url: "https://www.konka-display.com/",
  },
];
const funcNetworkItemList = [
  {
    key: "crm",
    text: "Konka CRM",
    url: "https://crm.konka.com/#/user/login",
  },
  {
    key: "chuanhao",
    text: "串号查询",
    url: "https://service.kkapp.com/KKAFTERSALE//pages/sn/sn.jsp",
  },
];

const copyRight = "康佳集团股份有限公司呼叫中心 皖ICP备10012739号-1";

// 页面跳转
const doToGoPage = (url: string): void => {
  window.open(url, "_blank");
};
</script>
<style scoped lang="less">
@import "@/style/mobile/index.less";
.home-section-footer {
  background-color: #444;
  color: #c1bebe;
  &-top {
    // 有宽度的情况下 会让其自动居中
    margin: 0 auto;
    padding: 15px;
    padding-bottom: 25px;
    box-sizing: border-box;
    &-network1 {
      padding-bottom: 10px;
      border-bottom: 1px solid #cccccc4a;
    }
    &-network2 {
      padding-top: 10px;
    }
    &-network-item {
      display: inline-block;
      cursor: pointer;
      margin-left: 15px;
    }
  }
  &-bottom-right {
    text-align: center;
    line-height: 40px;
    background: #333;
  }
}
</style>
